<template>
    <div class="reg">
        <!-- 头部 -->
        <van-nav-bar   left-arrow >
            <template #title>
            <router-link to="/login"><span>登录</span></router-link>   
                <span>/注册</span>
            </template>
        </van-nav-bar>
             <van-form @submit="onSubmit" ref="regForm">
            <van-field
                v-model="username"
                name="username"
                label="手机号"
                placeholder="请填写手机号"
                :rules="[{ required: true, message: '请填写手机号'},{pattern:/^1[3-9]\d{9}$/,message:'手机号格式错误'}]"
            />
            <van-field
                v-model="vercode"
                name="vercode"
                clearable
                label="验证码"
                placeholder="请输入短信验证码"
                :rules="[{ required: true, message: '请填写验证码'},{pattern:/^\d{6}$/,message:'验证码格式错误'}]"
                >
                <template #button>
                    <van-button size="small" type="primary" @click="sendSms" native-type="button" :disabled=" codebBtnDisabled">{{code_text}}</van-button>
                </template>
                </van-field>
            <van-field
                v-model="password"
                type="password"
                name="password"
                label="密码"
                placeholder="密码"
                :rules="[{ required: true, message: '请填写密码' },{validator:(e=> /^\w{6,12}$/.test(e)),message: '密码格式错误。需要6到12位的字母或数字'}]"
            />
            <div style="margin: 16px;">
                <van-button square block color="#07c160" type="info" native-type="submit">提交</van-button>
            </div>
            </van-form>
        <!-- 请输入手机号 -->
         <!-- <van-field  placeholder="请输入手机号" />
          <van-field  placeholder="请输入密码" />
         <van-field  placeholder="请输入验证码" />
         请输入验证码 -->
         <!-- <div class="login-yz">
            <p>发送验证码</p>
         </div> -->
         <!-- 登录 -->
         <!-- <div class="login-dl">
            <p>注册</p> -->
         <!-- </div> -->
    </div>
</template>
<style lang="less">
body{
    background: #f7f8fa;
}
.reg .login-yz{
    height: 25px;
    width: 85px;
    background: #ededed;
    border-radius: 20px;
    position: absolute;
    right: 15px;
    top: 140px;
}
.reg .login-yz p{
    text-align: center;
    font-size: 8px;
    line-height: 10px;
    color: #666666;
}
.reg .login-dl{
    margin-top: 35px;
    margin: 0 25px;
    height: 45px;
    background: @green;
}
.reg .login-dl p{
    text-align: center;
    color: #fff;
    line-height: 43px;
}
.reg .van-nav-bar__title a{
    color: #fff;
}


</style>
<script>
import { NavBar,Field,Button,Form } from 'vant';
import{reg,sendSms}from'@/api/user'
export default {
components:{
    [NavBar.name]:NavBar,
    [Field.name]:Field,
    [Button.name]:Button ,
    [Form.name]:Form,
},
 data() {
    return {
      username: '',
      password: '',
      vercode:'',
      codebBtnDisabled:false,
      code_text:"发送验证码"
    };
  },
  methods: {
    onSubmit(values) {
      console.log('submit', values);
      reg(values).then(res=>{
        console.log(res)
      })
    },
    async sendSms(){
        try{
        let validate_res = await this.$refs.regForm.validate('username')
       // 1、准备请求接口
       this.codebBtnDisabled = true;
       this.code_text='发送中...'

           sendSms({
            mobile:this.username,
            type:'register'
        }).then(res=>{
            console.log(res);
            if(res.code ==0){
               //发送成功 
               this.$toast(`短信已经发送到手机号${this.username},请注意查收`)
               let count = 60;
            let timer = setInterval(()=>{
                count--;
                    this.code_text = `${count}s后再次发送`;
                    if(count<=0){
                        clearInterval(timer);
                        this.code_text= `再次发送`
                        this.codebBtnDisabled = false;
                        count=60
                    }
               },1000)
                
            }else{
                this.$toast(res.msg||'发送失败')
                this.codebBtnDisabled = false;
                this.code_text= '再次发送'
            }
        }).catch(err=>{
            console.log(err)
            this.$toast(err.msg||'发送失败')
            this.codebBtnDisabled = false;
            this.code_text= '再次发送'
        })
        }catch(e){

        }
        
    }
  },

    


};
</script>